import { useElementSize } from "@/features/useElementSize"
import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import { useFavoriteGame } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import { GridGameList } from "@/pages/HomePage/components/GridGameList"
import styled from "@emotion/styled"
import { useEffect } from "react"
import { useNavigate } from "react-router-dom"
import { GameCardItem } from "@/pages/HomePage/components/GameCardItem"
import { RefGameListItem } from "@/apis/home_page_constant_types"

const Root = styled.div`
    width: 100%;
    flex: 1;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
`

const Content = styled.div`
    flex: 1;
`

const Favorite = () => {
    const { isLoading, favoriteList, favMap, handleFavorite, getFavoriteGameList } =
        useFavoriteGame()
    const { elementRef, size } = useElementSize<HTMLDivElement>()
    const navigate = useNavigate()

    useEffect(() => {
        getFavoriteGameList()
    }, [getFavoriteGameList])

    return (
        <Root>
            <PageHeader
                sticky={true}
                title="Favorite"
                iconType="black-arrow"
                textColor="#131416"
                backgroundColor="#fff"
                onBack={() => {
                    navigate(-1)
                }}
            />
            <Content ref={elementRef}>
                <GridGameList<RefGameListItem>
                    list={favoriteList}
                    isLoading={isLoading}
                    height={size?.height ?? 0}
                    itemContent={(index, game) => {
                        return (
                            <GameCardItem
                                {...game}
                                key={`fav_game_item__${index}`}
                            />
                        )
                    }}
                />
            </Content>
        </Root>
    )
}

export default Favorite
